<template>
	<view>
		<h-dark :title="t('signin.title')"></h-dark>
		<view class="bg-[#4E55AF] px-[30rpx] pt-[30rpx] py-[260rpx]">
			<view class="text-center text-white">
				<view class="text-3xl font-bold mb-[15rpx]">
					{{getCurrency()}}{{formatMoney(data.totalReward)}} {{getCurrency2()}}
				</view>
				<view class="">
					{{t('signin.totalReward')}}
				</view>
			</view>
		</view>
		<view class="bg-[#2C326B] inline-block mx-[24rpx] rounded-lg mt-[-200rpx] px-[30rpx] pt-[50rpx]">
			<view class="float-left w-[14%] text-center mb-[50rpx] flex justify-center"
				v-for="(item, index) in data.datesArr" :key="index">
				<view class="text-center rounded-full p-[10rpx] w-[60rpx] h-[60rpx]"
					:class="item.signined?'bg-[#4E55AF] text-white ':'bg-[#3d4277]'">
					{{ item.day }}
				</view>
			</view>
		</view>

		<view class="mt-[30rpx] mx-[26rpx] max-w-[750px]">
			<u-button type="primary" :disabled="data.signined" @click="submitHandle">
				{{data.signined?t('signin.signinedBtn'):t('signin.signinBtn')}}
			</u-button>
		</view>

		<view class="mt-[50rpx] mx-[26rpx] pb-[30rpx]">
			<view class="font-bold flex justify-start items-center mb-[20rpx]">
				<u-icon size="32" name="info-circle-fill"></u-icon>
				<view class="ml-[10rpx]">
					{{t('signin.rule')}}
				</view>
			</view>
			<view class="p-[20rpx] bg-[#2C326B] leading-loose rounded-lg" v-html="data.content"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { signinConfig, signin } from '@/api/user'
	import { getHintDetail } from '@/api/news'
	import { getCurrency,getCurrency2, formatMoney, t } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('signin.title') })


	const data = reactive({
		datesArr: [],
		signined: false,
		totalReward: 0,
		content: ''
	})

	const submitHandle = async () => {
		if (data.signined) return
		await signin({ 'signin': 1 })
		getData()
		return uni.$u.toast(t('signin.signinSuccess'))
	}

	const getData = async () => {
		const res = await signinConfig()
		data.datesArr = res.datesArr
		data.signined = res.signined
		data.totalReward = res.totalReward

		const res_con = await getHintDetail({ id: 24 })
		data.content = res_con.content
	}

	getData()
</script>

<style lang="scss">
</style>